﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <!-- import Vue before Element -->
    <link href="/css/iconfont.css" rel="stylesheet">
    <link href="/css/message.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/jquery.contextMenu.min.css" rel="stylesheet"/>
    <link href="/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/skins.css" rel="stylesheet"/>
    <link href="/ruoyi/css/ry-ui.css?v=4.3.1" rel="stylesheet"/>
    <style type="text/css">
        body,html{
            background: #efeff4;
        }
        .head{
            width: 100%;
            height: 44px;
            background-color: #fff;
            color: #000;
            font-size: 14px;
            display:flex;
            display: -webkit-flex;
            -webkit-flex-direction:row;
            line-height: 40px;
            position: absolute;
            z-index: 100;
        }
        .a,.c{
            width:22px;
            float: right;
            margin-right: 0px;
            margin-left: 2px;
        }
        .b {
            flex:1;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 44px;
            white-space: nowrap;
            color: #000;
        }
        .arrow{
            line-height: 34px;
            ont-family: Muiicons;
            font-size: 24px;
            font-weight: 400;
            font-style: normal;
            display: inline-block;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
        }
        .div-textarea{
            width: 83%;
        }
    </style>
</head>
<body>

<div class="chatContainer" id="message">
<!--    <div class="chatBtn">-->
<!--        <i class="iconfont icon-xiaoxi1"></i>-->
<!--    </div>-->
    <div class="chat-message-num">10</div>
    <div class="chatBox" ref="chatBox">
<!--        <div class="chatBox-head">-->
<!--            <div class="chatBox-head-one">-->
<!--                Conversations-->
<!--                <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>-->
<!--            </div>-->
<!--            <div class="chatBox-head-two">-->
<!--                <div class="chat-return">返回</div>-->
<!--                <div class="chat-people">-->
<!--                    <div class="ChatInfoHead">-->
<!--                        <img src="img/icon01.png" alt="头像"/>-->
<!--                    </div>-->
<!--                    <div class="ChatInfoName">事务中心小姐姐</div>-->
<!--                </div>-->
<!--&lt;!&ndash;                <div class="chat-close">关闭</div>&ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
        <div class="head">
            <div class="a" @click="goback"><span class="fa arrow"></span></div>
            <div class="b">小事对话框</div>
            <div class="c"></div>
        </div>
        <div class="chatBox-info">
<!--            <div class="chatBox-list" ref="chatBoxlist">-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon01.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>自酌一杯酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">10</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon02.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>白兰地</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">8</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon03.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>威士忌</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">2</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon01.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>荷兰金酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">20</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon03.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>朗姆酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">10</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon02.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>特其拉酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">18</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon02.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>鸡尾酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">9</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon01.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>虎骨酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">12</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon01.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>琴酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num">99+</div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon02.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>葡萄酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num"></div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon01.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>蓝莓酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num"></div>-->
<!--                </div>-->
<!--                <div class="chat-list-people">-->
<!--                    <div><img src="img/icon03.png" alt="头像"/></div>-->
<!--                    <div class="chat-name">-->
<!--                        <p>樱花酒</p>-->
<!--                    </div>-->
<!--                    <div class="message-num"></div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">
                        <div v-for="message in messages">
                            <div class="clearfloat" v-show="message.fromToState==1?true:false">
                                <div class="author-name">
                                    <small class="chat-date">{{message.time}}</small>
                                </div>
                                <div class="left">
                                    <div class="chat-avatars"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640047016,2975827382&fm=26&gp=0.jpg" alt="头像"/></div>
                                    <div class="chat-message">
                                        {{message.information}}
                                    </div>
                                </div>
                            </div>

    <!--                        <div class="clearfloat">-->
    <!--                            <div class="author-name">-->
    <!--                                <small class="chat-date">2017-12-02 14:26:58</small>-->
    <!--                            </div>-->
    <!--                            <div class="left">-->
    <!--                                <div class="chat-avatars"><img src="img/icon01.png" alt="头像"/></div>-->
    <!--                                <div class="chat-message">-->
    <!--                                    <img src="img/1.png" alt="">-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->

                            <div class="clearfloat" v-show="message.fromToState==2?true:false">
                                <div class="author-name">
                                    <small class="chat-date">{{message.time}}</small>
                                </div>
                                <div class="right">
                                    <div class="chat-message">{{message.information}}</div>
                                    <div class="chat-avatars"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2883135903,343664560&fm=26&gp=0.jpg" alt="头像"/></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="chatBox-send">
            <div class="div-textarea" id="div-textarea" contenteditable="true"></div>
            <div>
                <button id="chat-biaoqing" class="btn-default-styles">
                    <i class="iconfont icon-biaoqing"></i>
                </button>
<!--                <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">-->
<!--                    <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"-->
<!--                           name="file" id="inputImage" class="hidden">-->
<!--                    <i class="iconfont icon-tuxiang"></i>-->
<!--                </label>-->
                <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                </button>
            </div>
            <div class="biaoqing-photo">
                <ul>
                    <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
                    </li>
                    <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
                    </li>
                    <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                    </li>
                    <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                    <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
                    </li>
                    <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
                    </li>
                    <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script> var ctx = "\/"; </script>
<script src="/js/js_api.js"></script>
<script>
    var content = new Vue({
        el: '#message',
        data: {
            messages: [],
            //     [{
            //     information: '开始',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // },{
            //     information: '嗯，适合做壁纸',
            //     time: '2018-04-12 20:46',
            //     fromToState: 2
            // }, {
            //     information: '你还有没有推荐的图做壁纸呢 ',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '有呀1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 2
            // }, {
            //     information: '你稍等一下，我给你看哦1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 2
            // }, {
            //     information: '有呀1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '你稍等一下，我给你看哦1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '有呀1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '你稍等一下，我给你看哦1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 2
            // }, {
            //     information: '有呀1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '你稍等一下，我给你看哦1',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '好了给你看',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }, {
            //     information: '谢谢，这个真的好看极了',
            //     time: '2018-04-12 20:46',
            //     fromToState: 2
            // }, {
            //     information: '是吧',
            //     time: '2018-04-12 20:46',
            //     fromToState: 1
            // }],
            storyId: window.location.href.split("?")[1].split("=")[1]
        },
        created: function (){

            $.ajax({
                url: ctx + "story/message/list/" + this.storyId,
                type: "post",
                dataType: "json",
                success: function (msg) {
                    content.messages = msg;
                    console.log(content.messages);
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        },
        methods: {
            goback: function() {
                window.history.back(-1);
            }
        }
    });







    var n = $(this).index();
    $(".chatBox-head-one").toggle();
    $(".chatBox-head-two").toggle();
    $(".chatBox-list").fadeToggle();
    $(".chatBox-kuang").fadeToggle();

    //传名字
    $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());

    //传头像
    $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));

    //聊天框默认最底部
    $(document).ready(function () {
        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
    });

    screenFuc();
    function screenFuc() {
        var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
        //屏幕小于768px时候,布局change
        var winWidth = $(window).innerWidth();
        if (winWidth <= 768) {
            var totalHeight = $(window).height(); //页面整体高度
            // $(".chatBox-info").css("height", totalHeight - topHeight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
            //中间内容高度
            $(".chatBox-content").css("height", infoHeight - 46);
            $(".chatBox-content-demo").css("height", infoHeight - 46);

            $(".chatBox-list").css("height", totalHeight - topHeight);
            $(".chatBox-kuang").css("height", totalHeight - topHeight);
            // $(".div-textarea").css("width", winWidth - 106);
        } else {
            $(".chatBox-info").css("height", 495);
            $(".chatBox-content").css("height", 448);
            $(".chatBox-content-demo").css("height", 448);
            $(".chatBox-list").css("height", 495);
            $(".chatBox-kuang").css("height", 495);
            $(".div-textarea").css("width", 260);
        }
    }
    (window.onresize = function () {
        screenFuc();
    })();
    //未读信息数量为空时
    var totalNum = $(".chat-message-num").html();
    if (totalNum == "") {
        $(".chat-message-num").css("padding", 0);
    }
    $(".message-num").each(function () {
        var wdNum = $(this).html();
        if (wdNum == "") {
            $(this).css("padding", 0);
        }
    });


    //打开/关闭聊天框
    $(".chatBtn").click(function () {
        $(".chatBox").toggle(10);
    })
    $(".chat-close").click(function () {
        $(".chatBox").toggle(10);
    })
    //进聊天页面
    $(".chat-list-people").each(function () {
        $(this).click(function () {
            var n = $(this).index();
            $(".chatBox-head-one").toggle();
            $(".chatBox-head-two").toggle();
            $(".chatBox-list").fadeToggle();
            $(".chatBox-kuang").fadeToggle();

            //传名字
            $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());

            //传头像
            $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));

            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        })
    });

    //返回列表
    $(".chat-return").click(function () {
        $(".chatBox-head-one").toggle(1);
        $(".chatBox-head-two").toggle(1);
        $(".chatBox-list").fadeToggle(1);
        $(".chatBox-kuang").fadeToggle(1);
    });

    //      发送信息
    var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>');
    $("#chat-fasong").click(function () {
        textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>');
        if (textContent != "") {
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2883135903,343664560&fm=26&gp=0.jpg\" alt=\"头像\" /></div> </div> </div>");
            //发送后清空输入框
            $(".div-textarea").html("");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        }

        var prefix = ctx + "story/message";
        var information = $(".div-textarea").html().replace(/[\n\r]/g, '<br>');
        var options;
        window.jsApi.getUserInfo()
            .then(res => {
                options = {
                    information: textContent,
                    fromToState: 2,
                    storyId: window.location.href.split("?")[1].split("=")[1],
                    studentId: res.result.KEY_ID
                };
            })
            .catch(err => {alert(err)});
        // $.operate.save(prefix + "/insert", options);
        // // $.table.init(options);
        // alert("12131x`")
        var config = {
            url: prefix + "/insert",
            type: "post",
            dataType: "json",
            data: options,
            // beforeSend: function () {
            //     $.modal.loading("正在处理中，请稍后...");
            // },
            success: function(result) {
                $.modal.closeLoading();
                $.modal.enable();
                // $.modal.msgSuccess('提交成功')
                // setTimeout( function(){
                //     window.location.href=ctx + "story/chatAndroid?id="+window.location.href.split("?")[1].split("=")[1];
                // }, 1 * 700 );
                // if (typeof callback == "function") {
                //     callback(result);
                // }
                // $.operate.successCallback(result);
            }
        };
        $.ajax(config)
    });

    //      发送表情
    // $("#chat-biaoqing").click(function () {
    //     $(".biaoqing-photo").toggle();
    // });
    $(document).click(function () {
        $(".biaoqing-photo").css("display", "none");
    });
    $("#chat-biaoqing").click(function (event) {
        event.stopPropagation();//阻止事件
    });

    // $(".emoji-picker-image").each(function () {
    //     $(this).click(function () {
    //         var bq = $(this).parent().html();
    //         console.log(bq)
    //         $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
    //             "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
    //             "<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +
    //             "<div class=\"chat-avatars\"><img src=\"../../../static/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
    //         //发送后关闭表情框
    //         // $(".biaoqing-photo").toggle();
    //         //聊天框默认最底部
    //         $(document).ready(function () {
    //             $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
    //         });
    //     })
    // });

    //      发送图片
    // function selectImg(pic) {
    //     if (!pic.files || !pic.files[0]) {
    //         return;
    //     }
    //     var reader = new FileReader();
    //     reader.onload = function (evt) {
    //         var images = evt.target.result;
    //         $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
    //             "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
    //             "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
    //             "<div class=\"chat-avatars\"><img src=\"../../../static/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
    //         //聊天框默认最底部
    //         $(document).ready(function () {
    //             $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
    //         });
    //     };
    //     reader.readAsDataURL(pic.files[0]);
    //
    // }


</script>
</html>
